<template>
  <div>
    <div style="position: relative;padding-top: 30px;">
      <el-row>
        <el-col :span="9">
          <el-form-item label="药品使用" prop="medical">
            <el-input placeholder="请输入药品名称" clearable v-model="searchForm.medicalName"></el-input>
            <!--            <condition-filter v-model="searchForm.medicals" :filter-list="medicalList" fieldName="drugs_risk_item"-->
            <!--                              @change="changeMedical" :prefix="prefix"-->
            <!--                              placeholder="请选择药品"></condition-filter>-->
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="症状" prop="symptoms">
            <el-input placeholder="请输入症状名称" clearable v-model="searchForm.diagnosisName"></el-input>
            <!--            <condition-filter v-model="searchForm.symptoms" :filter-list="symptomsList"-->
            <!--                              fieldName="diagnosis_risk_item" :prefix="prefix"-->
            <!--                              @change="changeSymptoms"-->
            <!--                              placeholder="请选择症状"></condition-filter>-->
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <hr style="opacity: 0.2"/>
    <div style="margin-top: 12px;padding: 12px">
      <div
        style="padding: 12px 20px; margin-bottom: 12px;display: flex;align-items: center;justify-content: space-between; background-color: #EFEFEF "
        @click="showMoreSearch=!showMoreSearch">
        <div style="color:#409EFF">高级搜索</div>
        <el-icon style="color:#409EFF" :name="showMoreSearch?'arrow-down':'arrow-up'"></el-icon>
      </div>
      <template v-if="showMoreSearch">
        <el-row>
          <el-col :span="8">
            <el-form-item label="登记号">
              <el-input v-model="searchForm.registerNum" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别">
              <el-dict enumName="GENDER" v-model="searchForm.gender"></el-dict>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入院科室">
              <el-select v-model="searchForm.hospitalizedDepartment" style="display: flex;flex: 1" filterable clearable>
                <el-option :value="item.value" :label="item.label" v-for="item in orgList"
                           :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="年龄范围">
              <div style="display: flex">
                <el-input v-model="searchForm.ageStart" placeholder="开始年龄" type="number" clearable>
                  <slot name="append">岁</slot>
                </el-input>
                <div style="margin-left: 10px;margin-right: 10px"> 到</div>
                <el-input v-model="searchForm.ageEnd" placeholder="结束年龄" type="number" clearable>
                  <slot name="append">岁</slot>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出院诊断">
              <el-input v-model="searchForm.leaveDiagnosis"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出院科室">
              <el-select v-model="searchForm.dischargeDepartment" style="display: flex;flex: 1" filterable clearable>
                <el-option :value="item.value" :label="item.label" v-for="item in orgList"
                           :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="更多">
              <advance-field-search v-model="searchForm.advances" :prefix="prefix" :moreList="moreList"
                                    @change="changeAdvance"></advance-field-search>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </div>
    <hr style="opacity: 0.2"/>
  </div>
</template>

<script>
import conditionFilter from '../condition-filter/condition-filter'
import advanceFieldSearch from '../advance-field-search/advance-field-search'

export default {
  name: 'advance-search-item',
  components: {
    conditionFilter, advanceFieldSearch
  },
  props: {
    value: {
      type: [Object],
      default() {
        return {}
      }
    },
    prefix: {
      type: [String],
      default: ''
    },
    moreList: {
      type: [Object],
      default() {
        return []
      }
    },
    medicalList: {
      type: [Array],
      default() {
        return []
      }
    },
    symptomsList: {
      type: [Array],
      default() {
        return []
      }
    },
    orgList: {
      type: [Array],
      default() {
        return []
      }
    }
  },
  data() {
    return {
      showListField: true,
      showMoreSearch: true,
      searchForm: {
        medicalName: '',
        diagnosisName: '',
        medicals: [],
        symptoms: [],
        advances: [],
        advanceSql: '',
        drugsSql: '',
        symptomSql: '',
        symptom: '',
        orgNo: '',
        ageStart: '',
        ageEnd: '',
        gender: '',
        registerNum: '',
        hospitalTime: [],
        leaveDiagnosis: ''
      }
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(newVal, oldVal) {
        if (oldVal !== newVal) {
          this.searchForm = newVal
        }
      }
    }
  },
  created() {
  },
  methods: {
    changeMedical(sql) {
      this.searchForm.drugsSql = sql
      this.$emit('input', this.searchForm)
      console.log('advance-search-item', this.searchForm)
    },
    changeSymptoms(sql) {
      this.searchForm.symptomSql = sql
      this.$emit('input', this.searchForm)
      console.log('advance-search-item', this.searchForm)
    },
    changeAdvance(sql) {
      this.searchForm.advanceSql = sql
      this.$emit('input', this.searchForm)
      console.log('advance-search-item', this.searchForm)
    }
  }
}
</script>

<style scoped>
.el-tabs__header:last-child {
  margin-bottom: 0;
}
</style>
